<html>
	<head>
		<title>Dropdown Input</title>
		<link rel="stylesheet" href="../dropdown-input/dropdown-input.css" />
		<script type="text/javascript" src="../dropdown-input/dropdown-input.js"></script>
		<style>
			body {
				margin: 0;
			}
			
			.content {
				width: 300px;
				height: 300px;
				border: solid 1px #ededed;
				margin: 0 auto;
				margin-top: calc(50vh - 150px);
			}
			
			.dropdown {
				margin: 0 125px;
				margin-top: 140px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="dropdown-input">
				<input type="text" value="1" />
				<div class="dropdown-arrow">
					<svg width="15" height="15">
						<path d="M 4 5 L 8 10 L 12 5" stroke="#666666" fill="transparent" />
					</svg>
				</div>
				<div class="dropdown-list" style="display: none;">
					<ol>
						<li class="item">1</li>
						<li class="item">2</li>
						<li class="item">3</li>
					</ol>
				</div>
			</div>
		</div>
	</body>
</html>